<template>
    <div id="drugmanagementadd">
        <h1>添加药品</h1>
        <div class="head">
            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                <div><i class="el-icon-plus"></i><em>点击上传照片</em></div>
            </el-upload>
        </div>
        <div class="form">
            <el-form ref="form" :model="form" label-width="80px" :label-position="left">
                <el-form-item label="药品名称:">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="价格:">
                    <el-input v-model="form.age"></el-input>
                </el-form-item>
                <el-form-item label="主治:">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="禁忌:">
                    <el-input v-model="form.tel"></el-input>
                </el-form-item>
                <el-form-item label="所属门店:">
                    <el-input v-model="form.tel"></el-input>
                </el-form-item>
                <el-form-item label="规格:">
                    <el-input v-model="form.tel"></el-input>
                </el-form-item>
                <el-form-item label="库存数量:">
                    <el-input v-model="form.tel"></el-input>
                </el-form-item>
                <el-form-item label="药品类型:">
                    <el-select v-model="value">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                    <el-button type="primary">取消</el-button>
                </el-form-item>

            </el-form>
        </div>

    </div>
</template>

<script>
import { Message } from 'element-ui';

export default {
    data() {
        return {
            options: [{
                value: '选项1',
                label: '神经'
            }, {
                value: '选项2',
                label: '拉肚子'
            }, {
                value: '选项3',
                label: '感冒'
            }, {
                value: '选项4',
                label: '注射'
            }],
            value: '',

            imageUrl: '',
            left: 'left',
            form: {
                name: '',
                age: '',
                gender: '',
                tel: '',
                Character: ''
            }
        };
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        onSubmit() {
            console.log('submit!');
            confirm("添加成功")
        }
    }
}
</script> 

<style lang="less">
#drugmanagementadd {
    h1 {
        margin-top: 40px;
        margin-left: 30px;
    }

    .head {
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .avatar-uploader .el-upload--text {
            font-size: 20px;
            color: #8c939d;
            width: 350px;
            height: 178px;
            line-height: 178px;
            text-align: center;
            background-color: #fff;
        }

        margin-left: 175px;
        margin-top: 40px;
    }

    .form {
        margin-left: 95px;
        margin-top: 22px;
        width: 430px;

        .el-button--primary {
            width: 90px;
            margin-right: 30px;
        }

    }
}
</style>